<template>
  <div class="index">
    <div class="filter-top" @click="showRightFilter=true"> 
      请选择筛选条件 <div class="isclick"></div> 
    </div>
    <div class="equip-title-box">
      <div class="equip-title">菜品排行</div>
      <div class="equip-more" @click="goMore">更多 <div class="isclick"></div> </div>
    </div>
    <!-- 菜品列表 -->
    <div class="equipList-box">
      <div  v-for="(item,index) in goodsList" :key="index" :class="['equip-item isbtn', 'equip'+ index % 5,act_id==item.goodsId?'active':'' ]" @click="viewGoodsData(item.goodsId)">
        {{item.goodsName}}
      </div>
    </div>
    <!-- 开始结束筛选列表 -->
    <div class="star-end-list" v-if="isNext || nextNum == 1">
      <div :class="['num-filter-item',nextNum == 0 ? 'active':'']" @click="getNext('0',9)">
        0-9
      </div>
      <div :class="['num-filter-item',nextNum == 1 ? 'active':'']" @click="getNext(10,18)">
        10-18
      </div>
    </div>
    <div class="chart-box">
      <chart :seriesData="options"></chart>
    </div>
    
    <!-- <chart :seriesData="options"></chart>  -->
    <!-- 加载list -->
    <div class="data-list">
      <div class="data-header">
        <div class="data-header-title">商品名 </div>
        <div class="data-header-title">单价</div> 
        <div class="data-header-title">销售数量</div>
      </div> 
      <div class="data-row" v-for="(item,index) in goodsList" :key="index" :style="{ 'background': index % 2 == 1 ? '#fff' : '#f5f5f5'}">
        <div class="data-row-item">{{item.goodsName}} </div>
        <div class="data-row-item">￥{{item.orderAmount}} </div>
        <div class="data-row-item">{{item.salesCount}} </div>
      </div> 
      <div class="view-more isbtn" @click="goMore">
        查看更多 <div class="isclick"></div>
      </div>
    </div>

   
    <!-- 右侧弹出筛选 start -->
    <right-filter :showFilter.sync="showRightFilter" @close="showRightFilter=!showRightFilter">
      <!-- 插槽内容 -->
      <div class="slot-Ccontent">
        <div class="filter-title">开始时间</div>
        <div class="row-box">
          <group>
            <datetime v-model="starTime" :end-date="defult_endTime"></datetime>
          </group> 
        </div>
        <div class="filter-title">结束时间</div>
        <div class="row-box">
          <group>
            <datetime v-model="endTime" :end-date="defult_endTime"></datetime>
          </group> 
        </div>
       
        <div class="filter-title">城市</div>
        <div class="row-box">
          <group>
            <popup-picker v-model="city" :fixed-columns="1" show-name :data="cityList" placeholder="请选择城市"></popup-picker>
          </group> 
        </div>
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </right-filter>
    <!-- 右侧弹出筛选 end -->
  </div>
</template>

<script>
import chart from '@/components/chart'
import topFilter from '@/components/topFilter'
import rightFilter from '@/components/rightFilter' 
import { Datetime, Group, PopupPicker, Swiper  } from 'vux'
import api from '@/api/api.js'
import util from '@/utils/util.js'
export default {
  name: 'index',
  components: {
    chart,
    topFilter,
    rightFilter,
    Datetime,
    Group,
    PopupPicker,
    Swiper 
  },
  data () {
    return { 
      isNext: false,
      defult_endTime:'',
      starTime:'',
      endTime: '',
      activeIndx: 0,
      ordersList: [],
      chooseFirstIndex:0,
      filtIndex: 0 ,
      equipment:[],
      cityList:[],
      act_id:'',
      city:[],
      goodsList:[],
      equipmentList: [],
      filterData:'',
      nextNum: 0 ,
      options:{},
      showFilter:false, //顶部弹出
      showRightFilter: false, //右侧弹出
      treeList: [
        {title:'设备',id:'11',childrenList:[{title:'设备销量排行',id:1}]},
        {title:'菜品',id:'12',childrenList:[{title:'菜品销量排行',id:2}]}]
    }
  },
  created(){
    this.getAmouthDay();
  },
  mounted () { 
    this.getData(); 
    
  },
  filters: {
     
  },
  activated (){

  },
  watch:{
    city:{
      handler:(val)=>{
        console.log(val)
      }
    }
  },
  methods: {
    // 筛选默认最近一个月
    getAmouthDay(){ 
      let today= new Date();
      let mounth_ago =  new Date(today.getTime()-(30*24*60*60*1000)); 
      this.starTime = util.timeTampt(mounth_ago);
      this.endTime= util.timeTampt(today); 
      this.defult_endTime = util.timeTampt(today); 
    },
    getNext(star,end){
      if((star==0 && this.nextNum == 0 ) || (star==10 && this.nextNum == 1)){return}
      if(star == 0){
        this.nextNum = 0 
      }else{
        this.nextNum = 1 
      }
      let params ={
        "start":star,
        "end":end
      } 
      params.chartType = 'goods';
      this.getData(params)
    },
    //重置筛选
    reset(){
      this.city = [];
      this.getAmouthDay();
    },
    //设备
    viewMydata(sn){
      // this.$router.push({path:'/moreList',query:{sn:sn}}); 
      this.act_id=sn;
      api.moreList.orderList({pageNum:1,pageSize:10,sn:sn},res=>{ 
        this.ordersList = res.result.data;  
      })
    },
    // 菜品
    viewGoodsData(goodsId){
      // this.$router.push({path:'/moreList',query:{goodsId:goodsId}});
      // this.act_id=goodsId;
      // api.moreList.orderList({pageNum:1,pageSize:10,goodsId:goodsId},res=>{ 
      //   this.ordersList = res.result.data;  
      // })
    },
    //确认搜索
    confirmSelect(){
      var parmas = {}
      if(this.city[0]){
        parmas.city = this.city[0]
      }
      parmas.startDate =this.starTime;
      parmas.endDate =this.endTime;
      parmas.chartType =  'goods';
      this.getData(parmas);
      this.showRightFilter =false;
    },
    getData(params){
      params = params || {}
      let defult=   {
        "chartType":  "goods",
        "start": '0',
        "end":9
      }
      params= Object.assign(defult,params);
      api.data.chart(params,res=>{
        this.showFilter = false;
        this.isNext = res.result.next == 1 ? true : false;
        // res.result.options.color = ['#c23531','#2f4554', '#61a0a8'];
        //设置柱状图颜色
        res.result.options.series[0].itemStyle= {
            normal: {
　　　　　　　　//这里是重点
                color: function(params) {
                  var colorList = ['#FABE00','#1D62F0', '#cccccc', '#FF2719', '#FF5E3A'];
                  let index = params.dataIndex
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return colorList[index]
                }
            }
        }
        res.result.options.yAxis.name = params.chartType=='device' ? "金额(元)":"数量(份)"
        this.options=res.result.options; 
        this.goodsList = res.result.goods; 
        this.ordersList = res.result.orders;
        if(this.cityList[0]){
          return 
        }
        // 转化成value 和name的形式
        let cityArr = res.result.city.map(item=>{
          return {name: item.city,value:item.city}
        })
        this.cityList = [cityArr]

      })
    }, 
    showChildren(index){
      this.activeIndx=index;
    },
    filtChart(id,index){
      this.chooseFirstIndex = this.activeIndx;
      if(id == 1){
        this.getData({chartType:"device"})
      }else {
         this.getData({chartType:"goods"})
      }
    },
    goMore(){
      this.$router.push({ path : '/goodsSaleList' });
    },
    filterShow(){
      this.showFilter = !this.showFilter
    },
    changeFilter(e){ 
    }
  }
}
</script>
<style lang="less" scoped>
// /deep/.weui-cell_access .weui-cell__ft,.weui-cell{
//   display: flex;
// }
.equip-title-box{
  display: flex;
  justify-content: space-between;
  height: 44px;
  align-items: center;
  padding: 0 20px;
  .equip-title{
    font-weight: bold;
    font-size: 16px;
  }
  .equip-more{
    display: flex; 
    .isclick{
      margin-top: 5px;
    }
  }
}
.star-end-list{
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  .num-filter-item{
    padding: 6px 0 6px 20px;
    &.active{
      color: #FABE00;
      text-decoration: underline;
    }
  }
}
.equipList-box{
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;

  .equip-item{
    width: 33%;
    padding: 10px 10px 10px 30px;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .equip-item::before{
    content: '';
    width: 20px;
    height: 14px;
    border-radius: 2px;
    margin-right: 7px;
    position: absolute;
    left: 0;
    top:12px;
  }
  .equip0::before{
    background: #FABE00;
  }
  .equip1::before{
    background: #1D62F0;
  }
  .equip2::before{
    background: #ccc;
  }
  .equip3::before{
    background: #FF2719;
  }
  .equip4::before{
    background: #FF5E3A;
  }
  .active{
    color: #FABE00;
    font-weight: bold;
  }
}
/deep/.weui-cells{
  background: #f5f5f5;
}
.filter-top{
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    border-bottom: 1px solid #eee;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 3;
    .isclick{
        border-width: 0 1px 1px 0;
        margin-top: -6px;
    }
}
.index{
  padding-top: 70px;
}
.myCharts{
  width: 100%;
  height: 400px;
}
.slot-Ccontent{
  padding: 20px;
  position: relative;
  .row-box{
    margin-bottom: 20px;
  }
  .btn-box{
    display: flex;
    // position: absolute;
    // bottom: 0;
    width: 100%;
    margin-top: 140px;
    height: 44px;
    justify-content: space-between; 
    .btn{
      border-radius: 8px;
      height: 44px;
      width: 45%;
      line-height: 44px;
      text-align: center;
      color: #fff;
      &:active{
        opacity: .7;
      }
      &.reset{
        background: #ddd;
      }
      &.confirm{
        background: #FABE00;
      }
    }
  }
}
.left-panel{ 
  height: 100%;
  width: 150px;
  background: #f1f1f1;
  .panel-li{
    padding: 10px;  
    list-style: none;
    &.active{
        background: #fff;
    }
  }
}
.chrildren-list{
  flex: 1;
  background: #fff;
  height: 100%;
  .chrildren-li{
      // border-bottom: 1px solid #f6f6f6;
      list-style: none;
      padding: 10px; 
      &.active{
        color: #FABE00;
      }
  }
}
.header{
  height: 50px;
  background: #fff;
  box-shadow: 0  1px 5px  #ddd;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100vw;
  .choose-title{
    display: flex;
    justify-content: center;
    align-items: center;
    .isclick{
      border-width: 0 1px 1px 0;
      margin-top: -6px;
    }
  }
  .iconshaixuan{
    position: absolute;
    height: 50px;
    right: 12px;
    top: 0;
    line-height: 50px;
    color: #999;
    font-size: 22px;
    &:active{
      opacity: .7;
    }
  }
}
.data-list{
  .data-header{
    height: 48px;
    line-height: 48px;
    font-weight: bold;
    background: #ddd;
    display: flex;
    .data-header-title{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .data-row{
    height: 48px;
    line-height: 48px;
    display: flex;
    &-item{
      flex: 1;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.view-more{
  display: flex;
  align-items: center;
  height: 44px;
  justify-content: center; 
  .isclick{
    // border-width: 0 1px 1px 0;
    margin-top: -6px;
  }
}
</style>
